<template>
  <div class="set-params" @click="($event) => $event.stopPropagation()">
    <!--  body  -->
    <div class="description">
      <!-- <p v-if="algorithm==='KM'">
        模型介绍：<br />适用于iris数据集上的决策树分类模型，树的最大深度为5，该模型在与SVM、朴素贝叶斯、随即森林三个模型的对比。
      </p>
      <p v-else-if="algorithm==='KM'">
        模型介绍：<br />适用于iris数据集上的KMeans聚类模型，k=3，距离函数为欧氏距离。
      </p>
      <p v-else-if="algorithm==='KM'">
        模型介绍：<br />适用于iris数据集上的决策树分类模型，树的最大深度为5，该模型在与SVM、朴素贝叶斯、随即森林三个模型的对比中总体效果最高，可用于iris数据集分类，分类特征有4个，分别为sepal_width、sepal_length、petal_length、petal_width。
      </p>
      <p>
        模型介绍：<br />适用于iris数据集上的KMeans聚类模型，k=3，距离函数为欧氏距离。
      </p>
      <p style="margin-top: 16px;">
        参数：<br />K：3<br />Maxlter：10<br />DistanceMeasure：euclidean
      </p> -->
      <p>模型介绍：{{ modelDesc ? modelDesc : '无' }}</p>
      <span style="margin-top: 16px;">特征列(feature_cols)：</span><br />
      <a-row v-for="(item, index) in features" :key="index" class="match-row">
        <a-col :span="10">{{ item }}</a-col>
        <a-col :span="2"><a-icon type="swap" /></a-col>
        <a-col :span="12">
          <a-select
            ref="select"
            v-model="selectArray[index]"
            class="model-radius"
            placeholder="请选择"
            allow-clear
            size="small"
          >
            <a-select-option
              v-for="item2 in matchList"
              :key="item2"
              :value="item2"
            >
              {{ item2 }}
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
    </div>
    <!--  footer  -->
    <div class="footer-buttons">
      <div class="btn import-btn" @click="execute">执行</div>
      <div class="btn cancel-btn" @click="cancelChange">取消</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Watch } from 'vue-property-decorator'
import Component from 'vue-class-component'
import DataViewStore from '@/store/modules/dataview'

@Component
export default class MyModel extends Vue {
  public modelData: any = {}
  public features: any = []
  public matchList: any = []
  public selectArray: any = []
  // 当前节点的 id
  private get selectNode() {
    return DataViewStore.selectNode
  }

  @Watch('selectNode')
  public selectNodeChange() {
    this.init()
  }

  public get projectId() {
    return DataViewStore.projectId
  }

  public get pipelineId() {
    return DataViewStore.getPipelineId
  }

  public get modelDesc() {
    return this.selectNode?.data?.modelDesc
  }

  public created() {
    // console.log(this.selectNode?.data?.feature_X.split(','))
    // DataViewStore.refreshTaskQueryById(this.selectNode.id)
    this.init()
  }

  public init() {
    this.matchList = this.selectNode?.data?.input[0]?.tableCols
    this.features = this.selectNode?.data?.param?.feature_col
    // this.selectArray =
    // this.selectNode?.data?.feature_X?.split(',') ??
    // new Array(this.features.length)
    if (this.selectNode?.data?.feature_X?.split(',')) {
      this.selectArray = this.selectNode?.data?.feature_X?.split(',')
    } else if (this.selectNode?.data?.match) {
      this.selectArray = new Array(this.features.length)

      Object.keys(this.selectNode?.data?.match)?.forEach((element: any) => {
        const index = this.features.findIndex((item: any) => element === item)
        this.selectArray[index] = this.selectNode?.data?.match[element]
      })
    }
    console.log(this.modelData)

    this.matchList?.splice(
      this.matchList.findIndex((item: any) => item === '_record_id_'),
      1
    )
  }

  public execute() {
    let i = 0
    this.selectArray.forEach((element: any) => {
      if (element) {
        i += 1
      }
    })
    if (i === this.features.length) {
      this.$emit('confirm', {
        feature_col: this.selectArray.toString(),
      })
    } else {
      this.$message.warn('请完善选择！')
    }
  }

  public cancelChange() {
    this.$emit('cancel')
  }
}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/set-params/setParams';

.match-row {
  align-items: center;
  display: flex;
  line-height: 32px;
  margin-bottom: 4px;
}

.model-radius {
  border-radius: 4px;
  height: 24px !important;
  width: 100%;
}
</style>
